<template>
    <el-submenu :index="subItem.index" :key="subItem.index">
        <template #title>
            <i :class="subItem.icon"></i>
            <span>{{ subItem.title }}</span>
        </template>
        <template v-for="items in subItem.subs">
            <template v-if="items.subs">
                <!-- 递归渲染 -->
                <sidebar-item  :key="items.index" :subItem="items"/>
            </template>
            <template v-else>
                <el-menu-item :index="items.index" :key="items.index">{{ items.title }}</el-menu-item>
            </template>
        </template>
    </el-submenu>
</template>

<script>

import { reactive ,toRefs } from 'vue'
import { useSidebarStore } from '../../store/sidebar'

export default {
    props:{
        subItem: {
            type: Object,
            default: () => {}
        }
    },
    setup(props) {
        const data = reactive({
            subItem: props.subItem
        })

        const sidebar = useSidebarStore();

        return {
            sidebar,
            ...toRefs(data)
        };
    },
};
</script>

<style scoped>

</style>
